<template>
  <div class="app-container uom">
    <div class="card-box">
      <el-button type="primary" @click="handleToCreate">添加单位</el-button>
    </div>
    <div class="card-box">
      <el-table v-loading="uomStore.loading.list" :data="uomStore.list">
        <el-table-column label="ID" prop="id" />
        <el-table-column label="名称" prop="name" />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="small" type="primary" @click="handleToEditor(scope.row)">
              编辑
            </el-button>
            <el-popconfirm
              title="是否继续删除该单位？"
              type="error"
              @confirm="handleDelete(scope.row.id)"
            >
              <template #reference>
                <el-button size="small" type="danger">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog v-model="formVisible" :close-on-click-modal="false" :title="dialogTitle">
      <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入单位名称" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="formVisible = false">取消</el-button>
          <el-button
            type="primary"
            :loading="uomStore.loading.create || uomStore.loading.update"
            @click="handleConfirm"
          >
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import useUomStoreHook from "@/store/modules/uom";
import { UomItem, UomFormData } from "@/api/goods/goods";
import { cloneDeep } from "lodash-es";

const uomStore = useUomStoreHook();

const options = ref<UomItem[]>([]);

const formRef = ref();

const formVisible = ref<boolean>(false);

const formType = ref<"create" | "editor">("create");

const defaultForm: UomFormData = {
  name: "",
  group: undefined,
};

const form = reactive<UomFormData>(cloneDeep(defaultForm));

const rules = {
  name: [{ required: true, message: "请输入单位名称", trigger: "blur" }],
  image_url: [{ required: true, message: "请上传单位图标", trigger: "blur" }],
};

const dialogTitle = computed(() => {
  return formType.value === "create" ? "添加单位" : "编辑单位";
});

watch(formVisible, (val) => {
  if (!val) {
    formRef.value.resetFields();
    Object.assign(form, cloneDeep(defaultForm));
  }
});

function handleToCreate() {
  formType.value = "create";
  formVisible.value = true;
}

function handleToEditor(item: UomItem) {
  Object.assign(form, item);
  formType.value = "editor";
  formVisible.value = true;
}

async function handleDelete(id: number) {
  await uomStore.fetchDeleteUom(id);
  await uomStore.fetchUomList();
}

async function handleConfirm() {
  const valid = await formRef.value.validate();
  if (!valid) {
    return;
  }
  if (valid) {
    if (formType.value == "create") {
      const res = await uomStore.fetchCreateUom(form);
      if (res) {
        formVisible.value = false;
        await uomStore.fetchUomList();
      }
    } else if (formType.value == "editor") {
      const res = await uomStore.fetchUpdateUom(form);
      if (res) {
        formVisible.value = false;
        await uomStore.fetchUomList();
      }
    }
  }
}

onMounted(async () => {
  await uomStore.fetchUomList();
  options.value = cloneDeep(uomStore.list);
});
</script>

<style lang="scss" scoped></style>
